import { UserOutlined } from '@ant-design/icons'
import { Button } from 'antd'
import { FC, useState } from 'react'
import { isFullPermissionRole } from 'template-backend/src/common/utils/auth.utils'

import type { CommentItem } from '@/types'
import { dayjs } from '@/utils/dayjs'

interface ScheduleCommentListProps {
  comments: CommentItem[]
  compact?: boolean // 是否为紧凑模式（列表页使用）
}

const ScheduleCommentList: FC<ScheduleCommentListProps> = ({ comments, compact = false }) => {
  const [showAll, setShowAll] = useState(false)

  if (!comments || comments.length === 0) {
    return <span className="text-gray-400">暂无回复</span>
  }

  // 紧凑模式下只显示最新1条回复
  const displayComments = compact && !showAll ? comments.slice(-1) : comments
  const hasMoreComments = compact && comments.length > 1 && !showAll

  return (
    <div className="space-y-2">
      {/* 回复列表 */}
      <div className={`space-y-2 ${compact ? 'max-h-32 overflow-y-auto' : ''}`}>
        {displayComments.map(comment => {
          const isCommentFromBoss = isFullPermissionRole(comment.user.role?.name || '')

          return (
            <div
              key={comment.id}
              className={`flex ${isCommentFromBoss ? 'justify-start' : 'justify-end'}`}
            >
              <div
                className={`max-w-xs rounded-lg px-3 py-2 text-xs lg:max-w-md ${
                  isCommentFromBoss
                    ? 'border border-blue-200 bg-blue-50'
                    : 'border border-green-200 bg-green-50'
                }`}
              >
                <div className="mb-1 flex items-center gap-1">
                  <UserOutlined className="text-gray-400" />
                  <span className="font-medium text-gray-800">{comment.user.name}</span>
                </div>
                <div className="mb-1 text-xs text-gray-500">
                  {dayjs(comment.createTime).format('MM-DD HH:mm')}
                </div>
                <div
                  className="whitespace-pre-wrap break-words text-xs leading-relaxed text-gray-800"
                  style={{
                    wordWrap: 'break-word',
                    wordBreak: 'break-word',
                    overflowWrap: 'break-word'
                  }}
                >
                  {comment.content}
                </div>
              </div>
            </div>
          )
        })}
      </div>

      {/* 展开/收起按钮 */}
      {hasMoreComments && (
        <div className="text-center">
          <Button
            type="link"
            size="small"
            onClick={() => setShowAll(true)}
            className="!h-auto !p-0 text-xs"
          >
            查看全部 {comments.length} 条回复
          </Button>
        </div>
      )}

      {/* 收起按钮 */}
      {compact && showAll && comments.length > 1 && (
        <div className="text-center">
          <Button
            type="link"
            size="small"
            onClick={() => setShowAll(false)}
            className="!h-auto !p-0 text-xs"
          >
            收起
          </Button>
        </div>
      )}
    </div>
  )
}

export default ScheduleCommentList
